<template>
  <div class="home-container">
    <van-nav-bar title="创享云" />
    
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <div class="banner">
        <van-image
          src="https://via.placeholder.com/375x150/1989fa/fff?text=创享云"
          width="100%"
          height="150"
          fit="cover"
        />
      </div>
      
      <div class="quick-actions">
        <van-row gutter="10">
          <van-col span="8">
            <div class="action-item" @click="$router.push('/tasks')">
              <van-icon name="search" size="32" color="#1989fa" />
              <span>找任务</span>
            </div>
          </van-col>
          <van-col span="8">
            <div class="action-item" @click="$router.push('/my-tasks')">
              <van-icon name="orders-o" size="32" color="#1989fa" />
              <span>我的任务</span>
            </div>
          </van-col>
          <van-col span="8">
            <div class="action-item" @click="$router.push('/contracts')">
              <van-icon name="description" size="32" color="#1989fa" />
              <span>我的合同</span>
            </div>
          </van-col>
        </van-row>
      </div>
      
      <div class="section">
        <h3>推荐任务</h3>
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-card
            v-for="task in tasks"
            :key="task.id"
            :title="task.title"
            :desc="task.description"
            :price="task.price"
            :thumb="task.thumb"
            @click="$router.push(`/task/${task.id}`)"
          >
            <template #tags>
              <van-tag plain type="primary">{{ task.category }}</van-tag>
              <van-tag plain type="success">{{ task.location }}</van-tag>
            </template>
            <template #footer>
              <span class="company">{{ task.companyName }}</span>
            </template>
          </van-card>
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getRecommendTasks } from '@/api/task'

const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const tasks = ref([])

const onLoad = async () => {
  try {
    const response = await getRecommendTasks({
      page: Math.ceil(tasks.value.length / 10) + 1,
      size: 10
    })
    
    if (refreshing.value) {
      tasks.value = []
      refreshing.value = false
    }
    
    tasks.value.push(...response.data.records)
    
    if (tasks.value.length >= response.data.total) {
      finished.value = true
    }
  } catch (error) {
    console.error('加载任务失败:', error)
  } finally {
    loading.value = false
  }
}

const onRefresh = () => {
  finished.value = false
  loading.value = true
  onLoad()
}

onMounted(() => {
  onLoad()
})
</script>

<style scoped>
.home-container {
  background: #f5f5f5;
  min-height: 100vh;
}

.banner {
  margin-bottom: 10px;
}

.quick-actions {
  background: white;
  padding: 20px;
  margin-bottom: 10px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.action-item span {
  margin-top: 8px;
  font-size: 14px;
  color: #333;
}

.section {
  background: white;
  padding: 15px;
}

.section h3 {
  margin-bottom: 15px;
  font-size: 16px;
  color: #333;
}

.company {
  font-size: 12px;
  color: #666;
}
</style>